<template>
  <view class="page">
    <u-sticky>
      <view :style="{ padding: '20rpx', backgroundColor: '#f5f5f5' }">
        <view class="info-row">
          <view class="info-row-left">
            <u-image
              show-loading
              :src="shopInfo.avatar"
              shape="circle"
              width="140rpx"
              height="140rpx"
            />
            <view class="info-row-left-sign">
              <u-tag
                :show="shopInfo.state == 0 ? true : false"
                text="个人"
                color="#fff"
                bg-color="#5AC725"
                border-color="#5AC725"
                shape="circle"
                size="mini"
              />
              <u-tag
                :show="shopInfo.state == 1 ? true : false"
                text="企业"
                color="#fff"
                bg-color="#3C9CFF"
                border-color="#3C9CFF"
                shape="circle"
                size="mini"
              />
              <u-tag
                :show="shopInfo.state == 2 ? true : false"
                text="旗舰"
                color="#fff"
                bg-color="#FF6700"
                border-color="#FF6700"
                shape="circle"
                size="mini"
              />
            </view>
          </view>
          <view class="info-row-right">
            <view class="info-row-right-top">
              <text>
                {{ `地区：${shopInfo.city ? shopInfo.city.split("/")[1] : "中国"}` }}
              </text>
              <u-tag
                :show="shopInfo.isself ? true : false"
                text="官方放心购"
                color="#fff"
                bg-color="#F43F3B"
                border-color="#F43F3B"
                shape="circle"
                size="mini"
              />
            </view>
            <u-text
              :text="`店铺描述：${shopInfo.description}`"
              size="28rpx"
              color="#555"
              lines="2"
            />
          </view>
        </view>
        <u-input
          v-model="searchText"
          placeholder="搜索你需要的内容"
          suffixIcon="search"
          clearable
          suffixIconStyle="color: #909399"
          shape="circle"
          border="none"
          fontSize="13px"
          @confirm="handleSearch"
          :customStyle="{
            background: '#FFFFFF',
            padding: '6px',
          }"
        ></u-input>
      </view>
    </u-sticky>
    <view class="goods-box">
      <Goods-item v-for="(i, k) in dataList" :key="k" :row="i" />
    </view>
    <u-loadmore :status="status" height="60rpx" />
  </view>
</template>

<script>
import GoodsItem from "@/pages/mall/cp/GoodsItem";

import config from "@/request/baseUrl.js";
import { mallShopInfo, mallGoodsSearch } from "@/request/mallApi.js";
export default {
  components: { GoodsItem },
  data() {
    return {
      shopId: "", // 店铺ID
      shopInfo: {}, // 店铺信息
      searchText: "", // 搜索内容
      dataList: [], // 数据列表
      page: 1, // 页数
      status: "loadmore", // 加载状态
    };
  },
  onLoad(e) {
    this.shopId = e.id;
    this.getShopInfo();
    this.getDataList();
  },
  onReachBottom() {
    if (this.total <= this.dataList.length) return;
    this.page++;
    this.getDataList();
  },
  methods: {
    // 处理搜索
    handleSearch() {
      this.page = 1;
      this.total = 0;
      this.dataList = [];
      this.getDataList();
    },
    // 获取商品列表
    getDataList() {
      let data = {
        search: this.searchText,
        sort: "weigh", //weigh综合 sales销量 createtime上架时间 price价格
        order: "asc",
        page: this.page,
        type: "goods",
        filter: { shop_id: this.shopId },
        op: { shop_id: "in" },
      };
      this.status = "loading";
      mallGoodsSearch(data)
        .then((res) => {
          if (res.code == 1) {
            let data = res.data;
            data.data.forEach((i) => {
              i.image = config.baseUrl + i.image;
            });
            this.dataList = this.page == 1 ? data.data : this.dataList.concat(data.data);
            this.total = data.total;
          }
        })
        .finally(() => {
          this.status = this.total > this.dataList.length ? "loadmore" : "nomore";
        });
    },
    // 获取店铺信息
    getShopInfo() {
      mallShopInfo({ id: this.shopId }).then((res) => {
        if (res.code == 1) {
          let info = res.data;
          info.avatar = config.baseUrl + info.avatar;
          this.shopInfo = info;
          uni.setNavigationBarTitle({
            title: info.shopname,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  min-height: calc(100vh - 88rpx);
  background-color: #f5f5f5;
  .info-row {
    display: flex;
    align-items: center;
    padding: 30rpx;
    margin-bottom: 20rpx;
    background-color: #ffffff;
    border-radius: 30rpx;
    &-left {
      width: 140rpx;
      margin-right: 30rpx;
      position: relative;
      &-sign {
        position: absolute;
        top: -20rpx;
        right: -16rpx;
      }
    }
    &-right {
      flex: 1;
      &-top {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 28rpx;
        color: #555;
        margin-bottom: 6rpx;
        > text {
          margin-right: 20rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .goods-box {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 10rpx));
    grid-gap: 15rpx;
    gap: 20rpx;
    padding: 20rpx;
  }
}
</style>
